<template>
  <div class="productContainer">
    <div class="styleOne" v-for="(item,k) in list" :key="k">  <!-- 5、绑定到这个这个数组里面 -->
      <div class="productImages" :style="`background-image:url(${item.backgrond})`"></div>
      <div class="productInfor">
          <div class="taoShou" @click="giveFather(item.name)">{{item.name}}</div>   <!-- 1.注册事件,包括拿到值过来 -->
          <!-- <div class="fenShi">{{item.fen}}</div> -->
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  data() {
    return {
        
    }
  },
  props:{ //3、我来接收从父亲组件拿回来的数据 使用props接收！！！
    list: {    //4、申明下这种数据的类型 这个lists属性就是父组件绑定的:lists 属性名，不能写错了，不然拿不到了！！
        type:Array 
    }
  },
  methods:{
    giveFather(data){ //2.添加事件的方法 data就是item.name的值 并且发布出来
        this.$emit("getData",data)  //3.发布出来this.$emit是固定的写法,第一个参数是发布信息代号的名字驼峰法则,第二个参数是data一样的函数表达式
    }
  }
};
</script>

<style lang="less" scoped>
.productContainer {
  margin-top: 0.2rem;
  height: 3.5rem;
//   border: 1px solid red;
//   width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  .styleOne {
      background-color: #ffffff;
      padding: 0.2rem 0.3rem; 
      width: 100%;
      margin-bottom: 0.2rem;
    //   border: 1px solid red;
  }
  .productImages {
    width: 100%;
    height: 2.5rem;
    // border: 1px solid blue;
    background: url("../../assets/images/hotproducts/1.jpg") no-repeat center left;
    background-size: 100% 100%;
    // background-size: cover;//这个不好因为图片会显示不全
  }
  .productInfor {
    // display: flex;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    // border: 1px solid green;
    text-align: center;
    font-size: 0.3rem;
    color: #000000;

    
  }
}
</style>